import React from 'react';
import {StyleSheet, Text, Dimensions, View, Button, TouchableOpacity} from 'react-native';
import {StackNavigator} from 'react-navigation';
import ChatScreen from './pages/friends/lucy.js';
import ChatThird from './pages/friends/third.js';
import lvtest from './pages/list/list.js';
import IndexList from './pages/index/indexList.js';
import SectionList from './pages/sectionList/Main.js';
import Alert from './pages/index/AlertMask.js';
import DataTest from './testJson/linkage.json';
const {width, height} = Dimensions.get('window');
class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome'
    };

    constructor(props) {
        super(props);

        this.state = {
            isHide: true,
            titles:'请选择省份',
            pTitles:'请选择省份',
            cTitles:'请选择城市',
            aTitles:'请选择区域',
            cId:1,
            aId:3
        };
        this.dataArr=[]
    }

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View>
                <TouchableOpacity style={styles.whiteButton} onPress={() => navigate('IndexList')}>
                    <Text style={styles.textStyles}>Hello, Chat App!</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.whiteButton} onPress={() => navigate('Chat', {users: 'cherry'})}>
                    <Text style={styles.textStyles}>ToChat!</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.whiteButton} onPress={() => {
                    this.checkedCities("province","0");
                }}>
               
                <Text>{this.state.pTitles}</Text>
                </TouchableOpacity>
            
                <TouchableOpacity style={styles.whiteButton} onPress={() => {
                    var _cid=this.state.cId;
                    this.checkedCities("cities",_cid);
                }}>
               
                <Text>{this.state.cTitles}</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.whiteButton} onPress={() => {
                        var _aid=this.state.aId;
                         this.checkedCities("areas",_aid);
                }}>
               
                    <Text>{this.state.aTitles}</Text>
                </TouchableOpacity>
                <Alert ref="alertBox" dataArr={this.dataArr} isHide={this.state.isHide} 
                    onSelectedItem={(item)=>{
                    this.setCitysData(item,"p");
                }}/>
                <Alert ref="alertBox2" dataArr={this.dataArr} isHide={this.state.isHide} 
                    onSelectedItem={(item)=>{
                    this.setCitysData(item,"c");
                }}/>
                <Alert ref="alertBox3" dataArr={this.dataArr} isHide={this.state.isHide} 
                    titles={this.state.titles} onSelectedItem={(item)=>{
                    this.setCitysData(item,"a");
                }}/>

            </View>
        );
    }
    componentWillReceiveProps(){
       
    }
    componentWillMount() {

    }

    checkedCities(type,id) {
        var vm=this;
       
            vm.setState({isHide:false});
            DataTest.PROVINCE.forEach((item,index)=>{
                if(item.pId==id){
                    vm.dataArr.push(item);
                }
            })

            switch (type){
                case "province":  
                    this.refs.alertBox.show("请选择省份");
                break;
                case "cities":

                    this.refs.alertBox2.show("请选择城市");
                break;
                case "areas":

                    this.refs.alertBox3.show("请选择区域");
                break;
            }

    }

    setCitysData(item,t) {
        var vm=this;

        vm.setState({
            isHide:true
        })
        switch(t){
            case "p":
                vm.setState({
                    pTitles:item.name,
                    cId:item.id
                })

                this.refs.alertBox.out();

            break;
            case "c":
                 vm.setState({
                    cTitles:item.name,
                    aId:item.id
                 })

                this.refs.alertBox2.out();
            break;
            case "a":
                 vm.setState({
                    aTitles:item.name
                 })
                 this.refs.alertBox3.out();
            break;

        }
         vm.dataArr=[];
       
    }
}


const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    Chat: {screen: ChatScreen},
    Third: {screen: ChatThird},
    List: {screen: lvtest},
    IndexList: {
        screen: IndexList
    },
    SectionList: {
        screen: SectionList
    }
});

export default class App extends React.Component {
    render() {
        return <SimpleApp />;
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    },
    whiteButton: {
        marginTop: 30,
        height: 30,
        width: width,
        paddingLeft:10,
        backgroundColor: '#FFF'
    },
    textStyles: {

        height: 30,
        paddingLeft: 10
    }
});